<template>
    <div class="container">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <img class="avatar" src="../assets/touxiang.webp" alt="">
            <el-form-item label="用户名" prop="user">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密 码" prop="pass">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { adminLogin } from '@/request'
import { setCookie } from '@/utils/cookie'

export default {
    data() {
        return {
            ruleForm: {
                username: '许小墨',
                password: '123123'
            },
            rules: {
                user: [
                    { validator: this.checkUser, trigger: 'blur' }
                ],
                pass: [
                    { validator: this.validatePass, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        checkUser(rule, value, callback) {
            let userReg = /^[a-zA-Z1-9\u4e00-\u9fa5]{4,10}$/
            if (!userReg.test(value)) {
                callback(new Error('用户名数字字母组成4~10位！'));
            } else {
                callback();
            }
        },
        validatePass(rule, value, callback) {
            let passReg = /^.{6,12}$/
            if (!passReg.test(value)) {
                callback(new Error('密码长度要求6~12位！'));
            } else {
                callback();
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) {
                    return false;
                }
                let data = await adminLogin(this.ruleForm)
                if (data.error_code === 200) {
                    setCookie('adminName', this.ruleForm.username, 7200)
                    setCookie('adminId', data.data.userId, 7200)
                    localStorage.setItem('adminToken', data.data.token)
                    sessionStorage.setItem('auths', JSON.stringify(data.data.auths))
                    this.$store.commit('changeLoginStatus')
                    let that = this
                    this.$message({
                        message: data.msg,
                        type: 'success',
                        duration: 2000,
                        onClose: () => {
                            that.$router.push('/home')
                        }
                    });
                } else {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    background-color: #0769b4;
    height: 100%;
}

.el-form {
    width: 500px;
    padding-top: 50px;
    height: 210px;
    background-color: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    z-index: 2;
    border: 1px solid #fff;
}

.el-input {
    width: 90%;
}
</style>
